import { useEffect, useContext } from "react";
import ContactItem from "./ContactItem";
import { ContactContext } from "./context";

const data = [
    {
        name: "John Chan",
        email: "john@gmail.com",
        phone: "09969712111",
        isNew: true,
        status: "Open",
        step: 1,
    }, {
        name: "Amy Gee",
        step: 1,
        phone: "0956788111",
        email: "Amygee@yahoo.com"
    }, {
        name: "John Lo",
        step: 1,
        phone: "04569712111",
        email: "Johnlo@hotmail.com"
    }, {
        name: "Tommy G",
        step: 2,
        phone: "02369712111",
        email: "tomg@tommyg.com"
    }, {
        name: "Steve Jo",
        step: 3,
        phone: "09229712111",
        email: "sjo@stevejo.com"
    }
]

const ContactItems = (props) => {
    const { contactItems, setState, currentItemIndex } = useContext(ContactContext);
    useEffect(() => {
        setState({ contactItems: data, page: "Contacts" });
    }, [setState])
    return <div>
        {
            contactItems && contactItems.map((item, index) => {
                return <ContactItem key={`${item.email}${currentItemIndex}`} {...item} index={index} />
            })
        }
    </div>
};

export default ContactItems;